
<template>
  <div class="low-value-storage">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <!-- 入库管理 -->
      <el-tab-pane label="入库管理" name="inbound">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>低值易耗品入库</span>
              <el-button type="primary" @click="handleAddInbound">新增入库</el-button>
            </div>
          </template>

          <!-- 搜索区域 -->
          <el-form :inline="true" :model="inboundSearchForm" class="search-form">
            <el-form-item label="入库单号">
              <el-input v-model="inboundSearchForm.billNo" placeholder="请输入入库单号" clearable />
            </el-form-item>
            <el-form-item label="物品名称">
              <el-input v-model="inboundSearchForm.itemName" placeholder="请输入物品名称" clearable />
            </el-form-item>
            <el-form-item label="入库日期">
              <el-date-picker
                v-model="inboundSearchForm.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleInboundSearch">查询</el-button>
              <el-button @click="resetInboundSearch">重置</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格区域 -->
          <el-table :data="inboundTableData" border style="width: 100%">
            <el-table-column prop="billNo" label="入库单号" width="150" />
            <el-table-column prop="itemName" label="物品名称" width="180" />
            <el-table-column prop="specification" label="规格型号" width="150" />
            <el-table-column prop="quantity" label="入库数量" width="100" />
            <el-table-column prop="unit" label="单位" width="80" />
            <el-table-column prop="unitPrice" label="单价" width="100">
              <template #default="scope">
                ¥{{ scope.row.unitPrice.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="totalPrice" label="总价" width="120">
              <template #default="scope">
                ¥{{ scope.row.totalPrice.toFixed(2) }}
              </template>
            </el-table-column>
            <el-table-column prop="inboundDate" label="入库日期" width="120" />
            <el-table-column prop="operator" label="操作人" width="120" />
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="scope">
                <el-button link type="primary" @click="handleViewInbound(scope.row)">查看</el-button>
                <el-button link type="primary" @click="handleEditInbound(scope.row)">编辑</el-button>
                <el-button link type="primary" @click="handlePrintInbound(scope.row)">打印清单</el-button>
                <el-button link type="danger" @click="handleDeleteInbound(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页区域 -->
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="inboundPagination.currentPage"
              v-model:page-size="inboundPagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="inboundPagination.total"
              @size-change="handleInboundSizeChange"
              @current-change="handleInboundCurrentChange"
            />
          </div>
        </el-card>
      </el-tab-pane>

      <!-- 出库管理 -->
      <el-tab-pane label="出库管理" name="outbound">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>低值易耗品出库</span>
              <el-button type="primary" @click="handleAddOutbound">新增出库</el-button>
            </div>
          </template>

          <!-- 搜索区域 -->
          <el-form :inline="true" :model="outboundSearchForm" class="search-form">
            <el-form-item label="出库单号">
              <el-input v-model="outboundSearchForm.billNo" placeholder="请输入出库单号" clearable />
            </el-form-item>
            <el-form-item label="物品名称">
              <el-input v-model="outboundSearchForm.itemName" placeholder="请输入物品名称" clearable />
            </el-form-item>
            <el-form-item label="领用部门">
              <el-select v-model="outboundSearchForm.department" placeholder="请选择领用部门" clearable>
                <el-option label="财务部" value="finance" />
                <el-option label="行政部" value="admin" />
                <el-option label="技术部" value="tech" />
                <el-option label="市场部" value="marketing" />
              </el-select>
            </el-form-item>
            <el-form-item label="出库日期">
              <el-date-picker
                v-model="outboundSearchForm.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleOutboundSearch">查询</el-button>
              <el-button @click="resetOutboundSearch">重置</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格区域 -->
          <el-table :data="outboundTableData" border style="width: 100%">
            <el-table-column prop="billNo" label="出库单号" width="150" />
            <el-table-column prop="itemName" label="物品名称" width="180" />
            <el-table-column prop="specification" label="规格型号" width="150" />
            <el-table-column prop="quantity" label="出库数量" width="100" />
            <el-table-column prop="unit" label="单位" width="80" />
            <el-table-column prop="department" label="领用部门" width="120" />
            <el-table-column prop="receiver" label="领用人" width="120" />
            <el-table-column prop="outboundDate" label="出库日期" width="120" />
            <el-table-column prop="operator" label="操作人" width="120" />
            <el-table-column label="操作" width="200" fixed="right">
              <template #default="scope">
                <el-button link type="primary" @click="handleViewOutbound(scope.row)">查看</el-button>
                <el-button link type="primary" @click="handleEditOutbound(scope.row)">编辑</el-button>
                <el-button link type="primary" @click="handlePrintOutbound(scope.row)">打印清单</el-button>
                <el-button link type="danger" @click="handleDeleteOutbound(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页区域 -->
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="outboundPagination.currentPage"
              v-model:page-size="outboundPagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="outboundPagination.total"
              @size-change="handleOutboundSizeChange"
              @current-change="handleOutboundCurrentChange"
            />
          </div>
        </el-card>
      </el-tab-pane>

      <!-- 库存查询 -->
      <el-tab-pane label="库存查询" name="inventory">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>低值易耗品库存</span>
            </div>
          </template>

          <!-- 搜索区域 -->
          <el-form :inline="true" :model="inventorySearchForm" class="search-form">
            <el-form-item label="物品名称">
              <el-input v-model="inventorySearchForm.itemName" placeholder="请输入物品名称" clearable />
            </el-form-item>
            <el-form-item label="库存状态">
              <el-select v-model="inventorySearchForm.status" placeholder="请选择库存状态" clearable>
                <el-option label="正常" value="normal" />
                <el-option label="低于安全库存" value="low" />
                <el-option label="无库存" value="empty" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleInventorySearch">查询</el-button>
              <el-button @click="resetInventorySearch">重置</el-button>
            </el-form-item>
          </el-form>

          <!-- 表格区域 -->
          <el-table :data="inventoryTableData" border style="width: 100%">
            <el-table-column prop="itemName" label="物品名称" width="180" />
            <el-table-column prop="specification" label="规格型号" width="150" />
            <el-table-column prop="unit" label="单位" width="80" />
            <el-table-column prop="currentStock" label="当前库存" width="100" />
            <el-table-column prop="safetyStock" label="安全库存" width="100" />
            <el-table-column prop="status" label="库存状态" width="100">
              <template #default="scope">
                <el-tag :type="getInventoryStatusType(scope.row.status)">
                  {{ getInventoryStatusLabel(scope.row.status) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="lastInboundDate" label="最近入库日期" width="120" />
            <el-table-column prop="lastOutboundDate" label="最近出库日期" width="120" />
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="scope">
                <el-button link type="primary" @click="handleViewInventory(scope.row)">查看详情</el-button>
                <el-button 
                  v-if="scope.row.status === 'low'" 
                  link type="primary" 
                  @click="handleAddInbound"
                >
                  补充库存
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页区域 -->
          <div class="pagination-container">
            <el-pagination
              v-model:current-page="inventoryPagination.currentPage"
              v-model:page-size="inventoryPagination.pageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="inventoryPagination.total"
              @size-change="handleInventorySizeChange"
              @current-change="handleInventoryCurrentChange"
            />
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <!-- 入库单对话框 -->
    <el-dialog
      v-model="inboundDialogVisible"
      :title="inboundDialogTitle"
      width="600px"
    >
      <el-form
        ref="inboundFormRef"
        :model="inboundForm"
        :rules="inboundRules"
        label-width="120px"
      >
        <el-form-item label="物品名称" prop="itemName">
          <el-input v-model="inboundForm.itemName" placeholder="请输入物品名称" />
        </el-form-item>
        <el-form-item label="规格型号" prop="specification">
          <el-input v-model="inboundForm.specification" placeholder="请输入规格型号" />
        </el-form-item>
        <el-form-item label="入库数量" prop="quantity">
          <el-input-number v-model="inboundForm.quantity" :min="1" placeholder="请输入入库数量" />
        </el-form-item>
        <el-form-item label="单位" prop="unit">
          <el-input v-model="inboundForm.unit" placeholder="请输入单位" />
        </el-form-item>
        <el-form-item label="单价" prop="unitPrice">
          <el-input-number v-model="inboundForm.unitPrice" :min="0" :precision="2" placeholder="请输入单价" />
        </el-form-item>
        <el-form-item label="入库日期" prop="inboundDate">
          <el-date-picker
            v-model="inboundForm.inboundDate"
            type="date"
            placeholder="请选择入库日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="inboundForm.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注信息"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="inboundDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitInboundForm">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 出库单对话框 -->
    <el-dialog
      v-model="outboundDialogVisible"
      :title="outboundDialogTitle"
      width="600px"
    >
      <el-form
        ref="outboundFormRef"
        :model="outboundForm"
        :rules="outboundRules"
        label-width="120px"
      >
        <el-form-item label="选择物品" prop="itemId">
          <el-select v-model="outboundForm.itemId" placeholder="请选择物品" style="width: 100%">
            <el-option
              v-for="item in itemOptions"
              :key="item.id"
              :label="`${item.name} (${item.specification}) - 库存: ${item.stock}${item.unit}`"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="出库数量" prop="quantity">
          <el-input-number v-model="outboundForm.quantity" :min="1" :max="outboundForm.maxQuantity" placeholder="请输入出库数量" />
        </el-form-item>
        <el-form-item label="领用部门" prop="department">
          <el-select v-model="outboundForm.department" placeholder="请选择领用部门" style="width: 100%">
            <el-option label="财务部" value="finance" />
            <el-option label="行政部" value="admin" />
            <el-option label="技术部" value="tech" />
            <el-option label="市场部" value="marketing" />
          </el-select>
        </el-form-item>
        <el-form-item label="领用人" prop="receiver">
          <el-input v-model="outboundForm.receiver" placeholder="请输入领用人" />
        </el-form-item>
        <el-form-item label="出库日期" prop="outboundDate">
          <el-date-picker
            v-model="outboundForm.outboundDate"
            type="date"
            placeholder="请选择出库日期"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="用途" prop="purpose">
          <el-input
            v-model="outboundForm.purpose"
            type="textarea"
            :rows="3"
            placeholder="请输入用途说明"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="outboundDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitOutboundForm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 当前激活的标签页
const activeTab = ref('inbound')

// 入库管理相关
const inboundFormRef = ref()
const inboundDialogVisible = ref(false)
const inboundDialogTitle = ref('')
const inboundSearchForm = reactive({
  billNo: '',
  itemName: '',
  dateRange: []
})

const inboundTableData = ref([
  {
    id: 1,
    billNo: 'RK20230001',
    itemName: '办公文具套装',
    specification: 'A4纸+签字笔+文件夹',
    quantity: 50,
    unit: '套',
    unitPrice: 35.50,
    totalPrice: 1775.00,
    inboundDate: '2023-11-15',
    operator: '张三',
    remark: '各部门通用办公文具'
  },
  {
    id: 2,
    billNo: 'RK20230002',
    itemName: '打印纸',
    specification: 'A4 70g',
    quantity: 20,
    unit: '箱',
    unitPrice: 180.00,
    totalPrice: 3600.00,
    inboundDate: '2023-11-10',
    operator: '李四',
    remark: '各部门打印用纸'
  }
])

const inboundPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 50
})

const inboundForm = reactive({
  id: '',
  itemName: '',
  specification: '',
  quantity: 1,
  unit: '',
  unitPrice: 0,
  totalPrice: 0,
  inboundDate: '',
  remark: ''
})

const inboundRules = reactive({
  itemName: [
    { required: true, message: '请输入物品名称', trigger: 'blur' }
  ],
  specification: [
    { required: true, message: '请输入规格型号', trigger: 'blur' }
  ],
  quantity: [
    { required: true, message: '请输入入库数量', trigger: 'blur' }
  ],
  unit: [
    { required: true, message: '请输入单位', trigger: 'blur' }
  ],
  unitPrice: [
    { required: true, message: '请输入单价', trigger: 'blur' }
  ],
  inboundDate: [
    { required: true, message: '请选择入库日期', trigger: 'change' }
  ]
})

// 计算总价
watch(() => inboundForm.quantity, (newVal) => {
  inboundForm.totalPrice = newVal * inboundForm.unitPrice
})

watch(() => inboundForm.unitPrice, (newVal) => {
  inboundForm.totalPrice = inboundForm.quantity * newVal
})

// 出库管理相关
const outboundFormRef = ref()
const outboundDialogVisible = ref(false)
const outboundDialogTitle = ref('')
const outboundSearchForm = reactive({
  billNo: '',
  itemName: '',
  department: '',
  dateRange: []
})

const outboundTableData = ref([
  {
    id: 1,
    billNo: 'CK20230001',
    itemName: '办公文具套装',
    specification: 'A4纸+签字笔+文件夹',
    quantity: 10,
    unit: '套',
    department: '技术部',
    receiver: '张三',
    outboundDate: '2023-11-20',
    operator: '李四',
    purpose: '新员工入职办公用品'
  },
  {
    id: 2,
    billNo: 'CK20230002',
    itemName: '打印纸',
    specification: 'A4 70g',
    quantity: 5,
    unit: '箱',
    department: '行政部',
    receiver: '王五',
    outboundDate: '2023-11-18',
    operator: '赵六',
    purpose: '会议资料打印'
  }
])

const outboundPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 50
})

const outboundForm = reactive({
  id: '',
  itemId: '',
  itemName: '',
  specification: '',
  quantity: 1,
  maxQuantity: 1,
  unit: '',
  department: '',
  receiver: '',
  outboundDate: '',
  purpose: ''
})

const outboundRules = reactive({
  itemId: [
    { required: true, message: '请选择物品', trigger: 'change' }
  ],
  quantity: [
    { required: true, message: '请输入出库数量', trigger: 'blur' }
  ],
  department: [
    { required: true, message: '请选择领用部门', trigger: 'change' }
  ],
  receiver: [
    { required: true, message: '请输入领用人', trigger: 'blur' }
  ],
  outboundDate: [
    { required: true, message: '请选择出库日期', trigger: 'change' }
  ],
  purpose: [
    { required: true, message: '请输入用途说明', trigger: 'blur' }
  ]
})

// 物品选项
const itemOptions = ref([
  {
    id: 1,
    name: '办公文具套装',
    specification: 'A4纸+签字笔+文件夹',
    stock: 40,
    unit: '套'
  },
  {
    id: 2,
    name: '打印纸',
    specification: 'A4 70g',
    stock: 15,
    unit: '箱'
  }
])

// 监听物品选择变化，自动填充相关信息
watch(() => outboundForm.itemId, (newVal) => {
  if (newVal) {
    const item = itemOptions.value.find(item => item.id === newVal)
    if (item) {
      outboundForm.itemName = item.name
      outboundForm.specification = item.specification
      outboundForm.unit = item.unit
      outboundForm.maxQuantity = item.stock
      outboundForm.quantity = 1
    }
  } else {
    outboundForm.itemName = ''
    outboundForm.specification = ''
    outboundForm.unit = ''
    outboundForm.maxQuantity = 1
    outboundForm.quantity = 1
  }
})

// 库存查询相关
const inventorySearchForm = reactive({
  itemName: '',
  status: ''
})

const inventoryTableData = ref([
  {
    id: 1,
    itemName: '办公文具套装',
    specification: 'A4纸+签字笔+文件夹',
    unit: '套',
    currentStock: 40,
    safetyStock: 20,
    status: 'normal',
    lastInboundDate: '2023-11-15',
    lastOutboundDate: '2023-11-20'
  },
  {
    id: 2,
    itemName: '打印纸',
    specification: 'A4 70g',
    unit: '箱',
    currentStock: 15,
    safetyStock: 10,
    status: 'low',
    lastInboundDate: '2023-11-10',
    lastOutboundDate: '2023-11-18'
  },
  {
    id: 3,
    itemName: '文件夹',
    specification: 'A4 PP材质',
    unit: '个',
    currentStock: 0,
    safetyStock: 30,
    status: 'empty',
    lastInboundDate: '2023-10-05',
    lastOutboundDate: '2023-11-12'
  }
])

const inventoryPagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 30
})

// 获取库存状态标签
const getInventoryStatusLabel = (status) => {
  const statusMap = {
    normal: '正常',
    low: '低于安全库存',
    empty: '无库存'
  }
  return statusMap[status] || status
}

// 获取库存状态样式
const getInventoryStatusType = (status) => {
  const typeMap = {
    normal: 'success',
    low: 'warning',
    empty: 'danger'
  }
  return typeMap[status] || ''
}

// 标签页切换处理
const handleTabClick = (tab) => {
  console.log('切换标签页：', tab.props.name)
}

// 入库管理相关方法
const handleInboundSearch = () => {
  console.log('入库搜索条件：', inboundSearchForm)
  ElMessage.success('搜索成功')
}

const resetInboundSearch = () => {
  Object.keys(inboundSearchForm).forEach(key => {
    if (key === 'dateRange') {
      inboundSearchForm[key] = []
    } else {
      inboundSearchForm[key] = ''
    }
  })
  ElMessage.success('重置成功')
}

const handleAddInbound = () => {
  // 重置表单
  Object.keys(inboundForm).forEach(key => {
    if (key === 'quantity') {
      inboundForm[key] = 1
    } else if (key === 'unitPrice' || key === 'totalPrice') {
      inboundForm[key] = 0
    } else {
      inboundForm[key] = ''
    }
  })
  inboundDialogTitle.value = '新增入库'
  inboundDialogVisible.value = true
}

const handleViewInbound = (row) => {
  ElMessage.info(`查看入库单 ${row.billNo} 详情`)
}

const handleEditInbound = (row) => {
  // 填充表单数据
  Object.keys(inboundForm).forEach(key => {
    if (row[key] !== undefined) {
      inboundForm[key] = row[key]
    }
  })
  inboundDialogTitle.value = '编辑入库单'
  inboundDialogVisible.value = true
}

const handlePrintInbound = (row) => {
  ElMessage.success(`正在打印入库单 ${row.billNo} 的清单...`)
  // 实际应该调用打印功能
}

const handleDeleteInbound = (row) => {
  ElMessageBox.confirm(
    `确定要删除入库单 "${row.billNo}" 吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 实际应该调用API删除
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

const submitInboundForm = () => {
  inboundFormRef.value.validate((valid) => {
    if (valid) {
      // 实际应该调用API保存数据
      console.log('入库表单数据：', inboundForm)
      ElMessage.success(inboundDialogTitle.value.includes('新增') ? '新增成功' : '更新成功')
      inboundDialogVisible.value = false
    }
  })
}

const handleInboundSizeChange = (size) => {
  inboundPagination.pageSize = size
  // 实际应该重新加载数据
}

const handleInboundCurrentChange = (page) => {
  inboundPagination.currentPage = page
  // 实际应该重新加载数据
}

// 出库管理相关方法
const handleOutboundSearch = () => {
  console.log('出库搜索条件：', outboundSearchForm)
  ElMessage.success('搜索成功')
}

const resetOutboundSearch = () => {
  Object.keys(outboundSearchForm).forEach(key => {
    if (key === 'dateRange') {
      outboundSearchForm[key] = []
    } else {
      outboundSearchForm[key] = ''
    }
  })
  ElMessage.success('重置成功')
}

const handleAddOutbound = () => {
  // 重置表单
  Object.keys(outboundForm).forEach(key => {
    if (key === 'quantity') {
      outboundForm[key] = 1
    } else {
      outboundForm[key] = ''
    }
  })
  outboundDialogTitle.value = '新增出库'
  outboundDialogVisible.value = true
}

const handleViewOutbound = (row) => {
  ElMessage.info(`查看出库单 ${row.billNo} 详情`)
}

const handleEditOutbound = (row) => {
  // 填充表单数据
  Object.keys(outboundForm).forEach(key => {
    if (row[key] !== undefined) {
      outboundForm[key] = row[key]
    }
  })
  outboundDialogTitle.value = '编辑出库单'
  outboundDialogVisible.value = true
}

const handlePrintOutbound = (row) => {
  ElMessage.success(`正在打印出库单 ${row.billNo} 的清单...`)
  // 实际应该调用打印功能
}

const handleDeleteOutbound = (row) => {
  ElMessageBox.confirm(
    `确定要删除出库单 "${row.billNo}" 吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 实际应该调用API删除
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

const submitOutboundForm = () => {
  outboundFormRef.value.validate((valid) => {
    if (valid) {
      // 实际应该调用API保存数据
      console.log('出库表单数据：', outboundForm)
      ElMessage.success(outboundDialogTitle.value.includes('新增') ? '新增成功' : '更新成功')
      outboundDialogVisible.value = false
    }
  })
}

const handleOutboundSizeChange = (size) => {
  outboundPagination.pageSize = size
  // 实际应该重新加载数据
}

const handleOutboundCurrentChange = (page) => {
  outboundPagination.currentPage = page
  // 实际应该重新加载数据
}

// 库存查询相关方法
const handleInventorySearch = () => {
  console.log('库存搜索条件：', inventorySearchForm)
  ElMessage.success('搜索成功')
}

const resetInventorySearch = () => {
  Object.keys(inventorySearchForm).forEach(key => {
    inventorySearchForm[key] = ''
  })
  ElMessage.success('重置成功')
}

const handleViewInventory = (row) => {
  ElMessage.info(`查看物品 ${row.itemName} 的库存详情`)
}

const handleInventorySizeChange = (size) => {
  inventoryPagination.pageSize = size
  // 实际应该重新加载数据
}

const handleInventoryCurrentChange = (page) => {
  inventoryPagination.currentPage = page
  // 实际应该重新加载数据
}
</script>

<style scoped>
.low-value-storage {
  padding: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-form {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
